<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="name">
            <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="sex">
            <el-select v-model="form.sex" placeholder="please select your zone">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
            </el-select>
        </el-form-item>

        <el-form-item label="age">
            <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="score">
            <el-input v-model="form.score.yw" />
        </el-form-item>
        <el-form-item label="score1">
            <el-input v-model="form.score.sx" />
        </el-form-item>
        <el-form-item label="score2">
            <el-input v-model="form.score.yy" />
        </el-form-item>
        <el-form-item label="img">
            <el-input v-model="form.img" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button @click="onCancel">Cancel</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { defineModel, ref } from "vue";
import { useStore } from 'vuex'
const form = ref({ name: '', age: 0, sex: '', score: { yw: 0, sx: 0, yy: 0 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', });
const store = useStore()
const state = store.state
const onSubmit = function () {
    // console.log(form.value);
    store.commit('changeF');
    store.commit('stusAdd', {
        amount: form.value
    })
}
const onCancel = function () {
    store.commit('changeF')
}
// console.log(drawer);
// 输入完成后将form的值传递给stus
// stus.push(form)完成更新

</script>